<template>
    <div class="container">
        <BackBtn />
        <div class="content">
            <div class="header">
                <div class="title">
                    <h4>{{ listData.jobName }}</h4>
                    <p class="salary">{{ listData.salary }}/月</p>
                </div>
                <div class="title">
                    <p class="text">
                        {{ listData.jobDist }} | {{ listData.jobEdu }} |
                        {{ listData.jobExp }}
                    </p>
                    <p class="text">2021-12-20</p>
                </div>
            </div>
            <div class="place">
                <div class="placeLeft">
                    <van-icon name="location-o" size=".4rem" color="#FD7E39" />
                    <p>{{ listData.jobAddr }}</p>
                </div>
                <div class="placeRight">
                    <van-icon name="arrow" size=".4rem" color="#666666" />
                </div>
            </div>
            <!-- <div class="synopsis">
                <h4>荣信软件</h4>
                <p class="subtitle">民营公司|10000人以上|互联网/计算机</p>
                <div class="welfare">
                    <p>五险一金</p>
                    <p>下午茶</p>
                </div>
            </div> -->
            <div class="describe">
                <div class="title">职位描述</div>
                <p>职位描述：{{ listData.jobInfo }}</p>
            </div>
        </div>
        <div class="submit">
            <button @click="apply(listData.uuid)">申请该职位</button>
        </div>
    </div>
</template>

<script>
import axios from "@/api/axios.js";
import BackBtn from "@/components/BackBtn";
import moment from "moment";
import { Toast } from "vant";
export default {
    components: {
        BackBtn,
    },
    data() {
        return {
            listData: {},
        };
    },
    methods: {
        //申请
        apply(uuid) {
            console.log(uuid);
            //jobId == uuid  userId == 用户id
            axios
                .post(
                    `/hkrc/unit/applyJob?jobId=${uuid}&userId=${this.$store.state.uuid}`
                )
                .then((res) => {
                    console.log(res);
                    if (res.success) {
                        Toast.success("申请成功");
                    } else {
                        Toast.fail(res.msg);
                    }
                });
        },
    },
    created() {
        console.log(JSON.parse(this.$route.params.data));
        if (this.$route.params.data) {
            let data = JSON.parse(this.$route.params.data);
            data.createTime = moment(data.createTime).format("YYYY-MM-DD");
            this.listData = data;
        } else {
            this.$router.push("/");
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    .content {
        padding: 0 18.5px;
        .header {
            padding: 5px 0 15px 0;
            border-bottom: 1px solid #ddd;
            .title {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                h4 {
                    font-size: 24px;
                    font-weight: bold;
                    color: #000000;
                }
                .salary {
                    font-size: 15px;
                    font-weight: bold;
                    color: #fd7e39;
                }
                .text {
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
        .place {
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .placeLeft {
                display: flex;
                align-items: center;
                p {
                    margin-left: 5px;
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
        .synopsis {
            // padding: 30px 0;
            padding-bottom: 15px;
            h4 {
                font-size: 15px;
                font-weight: bold;
                color: #000000;
            }
            .subtitle {
                margin-top: 10px;
                font-size: 14px;
                color: #666666;
            }
            .welfare {
                margin-top: 10px;
                padding-bottom: 15px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                p {
                    margin-right: 5px;
                    font-size: 10px;
                    color: #666666;
                    padding: 2px 5px;
                    border-radius: 5px;
                    border: 1px solid #999999;
                }
            }
        }
        .describe {
            .title {
                font-size: 15px;
                font-weight: bold;
                color: #000000;
            }
            p {
                margin-top: 10px;
                font-size: 14px;
                color: #000000;
            }
        }
    }
    .submit {
        padding: 15px 18.5px;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        text-align: center;
        box-sizing: border-box;
        background: #fff;
        button {
            width: 100%;
            padding: 10px 0;
            font-size: 14px;
            color: #ffffff;
            background: #2c85f3;
            border-radius: 25px;
        }
    }
}
</style>